<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleUpload">上传</a-button>
    </template>
    <template #imageUrl="{ record }">
      <ImagePreview :image-list="[{ src: record.url, width: 80 }]" />
    </template>
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <JUploadModal v-model:value="data.materialUrl" @register="registerModel" @ok="handleSubmit" />
</template>

<script lang="ts" name="weixin-mp-menu" setup>
import {onMounted, reactive, watch} from 'vue'
import {BasicTable, TableAction} from '/@/components/Table';
import {ImagePreview} from '/@/components/Preview/index';
import {useListPage} from '/@/hooks/system/useListPage'
import {materialImageColumn} from '../data'
import {MediaFileType} from '../model'
import {deleteMpMaterial, pageMpMaterial, savePermanentMaterial} from '../api'
import {useModal} from '/@/components/Modal';
import {JUploadModal, UploadTypeEnum} from '/@/components/Form/src/jeecg/components/JUpload';
import {UploadBizType} from '/@/enums/uploadEnum';
import {useMessage} from "/@/hooks/web/useMessage";

const { createMessage } = useMessage()
const [registerModel, { openModal, closeModal }] = useModal();

const props = defineProps({
  objData: { type: Object, required: true },
})

const data = reactive<any>({
  materialUrl: ''
})
// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
  designScope: 'weixin-mp-material-image',
  tableProps: {
    api: pageMpMaterial,

    beforeFetch: (params) => {
      params.accountId = props.objData.accountId
      params.type = MediaFileType.IMAGE
    },
    columns: materialImageColumn,
    formConfig: {
      showResetButton: false,
      showSubmitButton: false
    },
    showTableSetting: false,
    useSearchForm: false,
    bordered: false,
    actionColumn: {
      width: 120,
    },
  }
})
const [registerTable, { getForm, reload }, { rowSelection, selectedRowKeys }] = tableContext;

const handleUpload = () => {
  openModal(true, {
    maxCount: 1,
    bizType: UploadBizType.GENERAL_IMAGE,
    fileType: UploadTypeEnum.image,
  });
}

watch(
  () => props.objData.accountId,
  (accountId: string) => {
    if (accountId) {
      reload()
    }
  }
);


onMounted(() => {
  if (props.objData.accountId) {
    reload()
  }
})


const handleSubmit = () => {
  if (data.materialUrl) {
    console.log("upload path: ", data.materialUrl);

    createMessage.loading({
      content: `正在上传...`,
      key: 'upload_material',
      duration: 0,
    });

    savePermanentMaterial({
      accountId: props.objData.accountId,
      type: MediaFileType.IMAGE,
      filePath: data.materialUrl
    }).then(() => {
      reload()
      createMessage.success({
        content: `上传成功`,
        key: 'upload_material',
        duration: 2,
      });
    }).catch(e => {
      createMessage.destroy('upload_material');
    })
  }
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteMpMaterial({ id: record.id }, () => {
    createMessage.success('删除成功')
    reload()
  });
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    }
  ]
}
</script>
